<template>
	<div class="task">
		<div v-for="(item,index) in list.list" class="task_item" v-if="item.trainingUuid">
			<p class="snp1">{{item.title}}</p>
			<div class="task_item_time">
				<img src="../assets/home/task1.png" alt="">
				<span>截止日期：{{item.endTime}}</span>
			</div>
			<div class="task_item_jf">
				<button class="btnS" @click="getOver(item.questionUuid,item.questionLink,item.questionWebLink)">问卷调查</button>
				<div>
					<img src="../assets/home/task2.png" alt="">
					<span>{{item.points}}积分</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {answerQuestionnaire} from "../api/home.js";
	const list = defineProps({
		list: Array
	})
	const $myemit=defineEmits(['getOver'])
	const getOver = (id,src,url) => {
		var data = {
			params: {
				questionUuid: id
			}
		}
		ElMessageBox.confirm(
				  '确认完成任务？',
				  '完成任务',
				  {
				    confirmButtonText: '确认',
				    cancelButtonText: '取消',
				    type: 'warning',
				  }
				)
				  .then(() => {
				    answerQuestionnaire(data).then(res=> {
						$myemit('getOver',true)
				    	window.open(url);
				    })
				  })
				  .catch(() => {
					  
				  })
	}
</script>

<style lang="scss" scoped>
	.task {
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		
		&_item {
			width: 360px;
			background: #FFFFFF;
			border-radius: 10px;
			padding: 15px;
			border: 1px solid rgba(17, 145, 142, 0.2);
			margin-top: 30px; 
			margin-right: 30px;
			height: max-content;
			p {
				font-size: 18px;
			}

			img {
				width: 21px;
				margin-right: 5px;
			}

			&_time {
				display: flex;
				align-items: center;
				margin: 15px 0 30px 0;

				span {
					font-size: 16px;
				}
			}

			&_jf {
				display: flex;
				justify-content: space-between;
				align-items: center;

				div {
					display: flex;
					align-items: center;
				}
			}
		}
		&_item:nth-of-type(3n+0) {margin-right: 0;}
	}
</style>